<template>
    <div class="college-selector">
        <a-select v-model:value="selectedCollege" @change="handleChange" :placeholder="placeholder" allow-clear>
            <a-select-option v-for="item in collegeList" :key="item.id" :value="item.id">
                {{ item.name }}
            </a-select-option>
        </a-select>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { getMajorList_api } from '@/apis';

const props = defineProps({
    modelValue: [String, Number],
    placeholder: {
        type: String,
        default: '请选择学院'
    }
});

const emit = defineEmits(['update:modelValue']);

const selectedCollege = ref(props.modelValue);
const collegeList = ref([]);

// 获取学院列表
const getCollegeList = async () => {
    const res = await getMajorList_api({});
    collegeList.value = res.data.slice(0, 4);
};

// 处理选择变化
const handleChange = (value) => {
    selectedCollege.value = value;
    emit('update:modelValue', value);
};

onMounted(() => {
    getCollegeList();
});

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
    selectedCollege.value = newVal;
});
</script>

<style lang="less" scoped>
.college-selector {
    width: 100%;
}

:deep(.ant-select) {
    width: 100%;
}
</style>